<template>
  <div>
    <el-container>
      <!--       aside -->
      <!--      100vh为整个窗口高度-->
      <el-aside style="width:200px; min-height: 100vh;background-color: #15293b">
        <div style="height: 60px; color: aliceblue; display: flex; align-items: center;justify-content: center" >
          <img :src="require('@/assets/library.jpg')" style="height: 80%;">
        </div>
        <!--        侧边导航栏-->

        <el-menu style="border: none" :default-active="$route.path" router background-color="#15293b" text-color="rgba(255,255,255,0.65)" active-text-color="#FFF"  @select="handleSelect">
          <el-menu-item @click="toPesonbook()">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>借阅书籍</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/person">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户信息</span>
            </template>
          </el-menu-item>
          <!--          <el-menu-item index="/about">-->
          <!--            <template slot="title">-->
          <!--              <i class="el-icon-house"></i>-->
          <!--              <span>用户管理</span>-->
          <!--            </template>-->
          <!--          </el-menu-item>-->
        </el-menu>
      </el-aside>


      <el-container>
        <!-- header -->
        <el-header style="display: flex; align-items: center; justify-content: space-between; height: 60px; background-color: #2c3e50; color: white;">
          <div style="text-align: center; width: 100%;">个人中心</div>
          <el-button @click="back()" size="mini" type="primary">返回</el-button>
        </el-header>

        <!-- main -->
        <el-main>
          <div class="login_form">
            <div class="greeting">Hello {{ this.username }}</div>
          <el-input
              placeholder="新用户名"
              suffix-icon="el-icon-user"
              v-model="personData.username" style="width: 30vh;">
          </el-input>

            <el-input
                placeholder="新用户名"
                suffix-icon="el-icon-user"
                v-model="personData.password" style="width: 30vh;">
            </el-input>
          <el-input
              placeholder="邮箱"
              suffix-icon="el-icon-folder-opened"
              v-model="personData.email" style="width: 30vh;margin-bottom: 8px">
          </el-input>
          <el-input
              placeholder="手机号码"
              suffix-icon="el-icon-phone"
              v-model="personData.phone" style="width: 30vh;margin-bottom: 8px">
          </el-input>
          <el-date-picker
              v-model="personData.date"
              type="date"
              placeholder="生日日期"
              style="width: 30vh;margin-bottom: 8px">
          </el-date-picker>
          <div style="display: flex; align-items: center">
            <h2 style="font-size: 2vh;">性别：</h2>
            <el-radio-group v-model="personData.gender">
              <el-radio-button label="男" ></el-radio-button>
              <el-radio-button label="女" ></el-radio-button>
              <el-radio-button label="其他" ></el-radio-button>
            </el-radio-group>
          </div>
          <button class="inupbutton" style="margin-top: 10px" @click="savePersonData()">保存</button>
          </div>

      </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";

export default {
  name: "PersonView",
  data() {
    return {
      personData: {
        date:new Date(),
        gender:'',
        phone:'',
        email:'',
        username: '',
        password: '',
        category: '',
        is_admin: false,
      },
      userid: 0,
      username: '',
      password: '',
    };
  },
  methods: {
    toPesonbook(){
      const message = this.$route.params.message;
      this.$router.push({ name: 'personbook',params: { message } });
    },
    update(){
      this.username = this.personData.username;
      this.password = this.personData.password;
      // 更新Cookie中的用户名和密码
      Cookies.set('username', this.username);
      Cookies.set('password', this.password);
    },
    back(){
    const message = this.$route.params.message;  // 获取路由参数
    if (message === "this is admin") {
      this.$router.push({ name: 'home' });
  } else {
      // 如果 message 不是 "this is admin"，执行以下代码
      this.$router.push({ name: 'userborrowview' });
  }
    },
    savePersonData() {
      // 检查用户名和密码是否为空
      if (this.personData.password == '' || this.personData.username == '') {
        // 使用Element UI的MessageBox或者Notification组件来给用户提示消息
        this.$message({
          message: '用户名和密码不能为空',
          type: 'warning'
        });
        return; // 阻止函数进一步执行
      }

      // 如果用户名和密码都不为空，则执行下面的代码
      axios.put('http://127.0.0.1:5000/v1/admin/editUserInfo',
          {
            userid: this.userid,
            new_username: this.personData.username,
            new_password: this.personData.password,
            new_category: this.personData.category,
            new_is_admin: this.personData.is_admin,
          },
          {headers: {'Content-Type': 'application/json', 'token': Cookies.get('token')}}
      )
          .then(() => {
            this.$message({
              message: '更改成功',
              type: 'success'
            });
          })
          .catch(error => {
            console.error('Error:', error);
            // 你可以在这里添加更多的错误处理逻辑，比如提示用户请求失败
            this.$message({
              message: '更新失败，请稍后再试',
              type: 'error'
            });
          });
      this.update();
    }
  },

  mounted() {
    this.username = Cookies.get('username');
    this.password = Cookies.get('password');
    this.userid = Cookies.get('userid');
    axios.get(`http://127.0.0.1:5000/v1/admin/getUserByID/${this.userid}`, {
      headers: {'token': Cookies.get('token')}
    }).then((response) => {
      console.log("Data loaded:", response.data);  // 查看加载的数据
      this.personData = response.data.data;
      this.personData.date = new Date();
      this.personData.email = "1111165555@qq.com";
      this.personData.phone = "1472583699"// 如果响应数据就是你需要的数据，则可能不需要.data
      console.log("personData after set:", this.personData);  // 确认设置后的状态
    }).catch((error) => {
      console.error("Error loading data:", error);
    });
  }
};
</script>

<style>
.form-button-container {
  margin-right: 100px; /* 按钮向左移动20px */
}

.form-button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.form-container {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  min-height: 80vh; /* 至少覆盖视口高度 */
}

.greeting {
  margin-bottom: 20px; /* 问候语与表单之间的距离保持不变 */
  font-size: 50px; /* 问候语的字体大小保持不变 */
  font-weight: bold; /* 增加字体粗细 */
  color: #1a73e8; /* 使用更鲜明的蓝色 */
}

.person-form {
  width: 40%; /* 可以根据需要调整宽度，使其更窄 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px 20px 20px 20px;
  border-radius: 10px;
}

/* 调整输入框的宽度 */
.el-input {
  width: 100%; /* 使输入框充满父容器的宽度，通过限制父容器的宽度来控制输入框的宽度 */
}

.login_form {
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 90vh; /* 让整个表单占据整个视口的高度 */
}


</style>